import { FC } from "react"
import DateSelector from "@/components/DateSelector"
import styles from "./index.less"

const nursingRecords: FC = () => {
  let reportList = [
    {
      key: "1",
      dates: "20210512",
      projectName: "血液化验单",
      type: "1",
      recordStatus: "未出报告",
      testRequisitionNo: "1",
      errorItemNum: "0",
      hospDistrictName: "天河医院"
    },
    {
      key: "2",
      dates: "20210512",
      projectName: "肝功能化验单",
      type: "2",
      recordStatus: "报告异常",
      testRequisitionNo: "2",
      errorItemNum: "0",
      hospDistrictName: "黄埔医院"
    }

  ]

  /**
   * 渲染列表
   */
  const renderReport = () => {
    return (
      reportList.map((item, index) => {
        return (
          <div className={`${styles.recordItem} ${index == 0 ? styles.itemActive : ""}`} key={index}>
            <div className={styles.recordItemTitle}>
              {index + 1}、{item.projectName}
            </div>
            <div className={styles.recordItemDetail}>
              <i />
              <span>{item.projectName}</span>
            </div>
            <div className={styles.recordItemDate}>
              <i />
              <span>{item.dates}</span>
            </div>
          </div>
        )
      })
    )
  }

  const renderTr = () => {
    let trList = []
    for (let i = 0; i < 16; i++) {
      trList.push(i)
    }
    return (
      trList.map((item, index) => {
        return (
          <tr key={index}>
            <td height="30px" />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td colSpan={3}>
              <table className={styles.nursingTable2} style={{ width: "100%" }}>
                <tbody>
                  <tr>
                    <td colSpan={1} />
                    <td colSpan={1} />
                  </tr>
                </tbody>
              </table>
            </td>
            <td colSpan={3}>
              <table className={styles.nursingTable2} style={{ width: "100%" }}>
                <tbody>
                  <tr>
                    <td colSpan={1} />
                    <td colSpan={1} />
                  </tr>
                </tbody>
              </table>
            </td>
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
            <td />
          </tr>
        )

      })
    )
  }

  return (
    <div>
      <div className={styles.testReport}>
        <div className={styles.testReportLeft}>
          <DateSelector />
          <div className={styles.reportList}>
            <div className={styles.reportCount}>共6条记录</div>
            <div className={styles.reportItemBox}>
              {
                renderReport()
              }
            </div>
          </div>
        </div>
        <div className={styles.reportRight}>
          <div className={styles.nursingRecordHead}>
            <div className={styles.nursingRecordHeadImg}> </div>
            <div className={styles.nursingRecordHeadTitle}>护理记录单（骨科）</div>
          </div>
          <div className={styles.nursingRecordInfo}>
            <span className={styles.infoTitle}>病人姓名：<span>dssad</span></span>
            <span className={styles.infoTitle}>性别：<span>男</span></span>
            <span className={styles.infoTitle}>年龄：<span>10月29天</span></span>
            <span className={styles.infoTitle}>科室：<span>儿童骨科护理单位</span></span>
            <span className={styles.infoTitle}>入院日期：<span>2020-12-08</span></span>
            <span className={styles.infoTitle}>床号：<span>1</span></span>
            <span className={styles.infoTitle}>诊断：<span>左侧髋关节病理性脱位术后</span></span>
            <span className={styles.infoTitle}>住院号：<span>P215179</span></span>
          </div>
          <div className={styles.nursingRecordBody}>
            <table className={styles.nursingTable}>
              <tbody>
                <tr>
                  <td className={styles.bg} rowSpan={2} width="26px">日期</td>
                  <td className={styles.bg} rowSpan={2} width="26px">时间</td>
                  <td className={styles.bg} rowSpan={2} width="35px">T<br />(°C)</td>
                  <td className={styles.bg} rowSpan={2} width="50px">P/HR<br />(次/分)</td>
                  <td className={styles.bg} rowSpan={2} width="50px">R<br />(次/分)</td>
                  <td className={styles.bg} rowSpan={2} width="70px">Bp<br />(mmHg)</td>
                  <td className={styles.bg} rowSpan={2} width="45px">SpO<sub>2</sub></td>
                  <td className={styles.bg} rowSpan={2} width="26px">意识</td>
                  <td className={styles.bg} rowSpan={2} colSpan={3} width="85.5px">
                    <table className={styles.nursingTable2} style={{ width: "100%" }}>
                      <tbody>
                        <tr>
                          <td colSpan={2}>入</td>
                        </tr>
                        <tr>
                          <td colSpan={1}>名称</td>
                          <td colSpan={1}>量<br />(ml)</td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td className={styles.bg} rowSpan={2} colSpan={3} width="85.5px">
                    <table className={styles.nursingTable2} style={{ width: "100%" }}>
                      <tbody className={styles.nursingTable}>
                        <tr>
                          <td colSpan={2}>出</td>
                        </tr>
                        <tr>
                          <td colSpan={1}>名称</td>
                          <td colSpan={1}>量<br />(ml)</td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="27px">1</td>
                  <td className={styles.bg} rowSpan={2} width="100px">特殊情况记录</td>
                  <td className={styles.bg} rowSpan={2} width="100px">护士签名</td>
                </tr>
              </tbody>
              <tbody className={styles.nursingRecordBodyContent}>
                {
                  renderTr()
                }
              </tbody>
            </table>
          </div>
        </div>
      </div >
    </div>
  )
}

export default nursingRecords